<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span>我叫{{name}}, 我今年{{age}}岁，我有如下嗜好：</span>

        <ul>
            <!-- <li v-for="item in hobby">{{item}}</li> -->
            <!-- <li v-for="(item, index) in hobby">{{index}}---{{item}}</li> -->

            <!-- v-for除了遍历数组，还能遍历 对象 数字 字符串 -->

            <!-- <li v-for="v in car">{{v}}</li> -->
            <!-- v 拿到的是属性的值 -->

            <!-- <li v-for="(v, k) in car">{{k}} : {{v}}</li> -->
            <!-- v 拿到的是属性的值 k是属性名-->

            <!-- <li v-for="(v, k, i) in car">{{i}}: {{k}} : {{v}}</li> -->
            <!-- v 拿到的是属性的值 k是属性名 i是当前循环的次数-->

            
            <!-- v-for如果遍历的是个数字，则是遍历指定次数，i是从1开始的 -->
            <!-- <li v-for="i in 100">{{i}}</li> -->

            <li v-for="c in 'abcdefg'">{{c}}</li>
        
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                car: {
                    brand: "yongjiu",
                    size: 28,
                    color: "pink"
                },
                name: "赵春明",
                age: 18,
                hobby: [
                    "瑜伽", 
                    "芭蕾", 
                    "钢管舞", 
                    "肚皮舞",
                    "美甲",
                    "韩式半永久纹眉"
                ]
            }
        })
    </script>
</body>

</html>